<template>
  <div :id="id" class="link-chart-panel" />
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'LinkChart',
  components: {},
  props: {
    id: {
      type: String,
      default() {
        return 'line_chart'
      }
    },
    text: {
      type: [String, Array],
      default() {
      }
    },
    more: {
      type: Boolean,
      default: false
    },
    yData: {
      type: [Array, Object],
      default() {
        return []
      }
    },
    grid: {
      type: Object,
      default() {
        return {
          top: 40,
          left: '10%',
          right: '10%',
          bottom: '10%'
        }
      }
    },
    xData: {
      type: Array,
      default() {
        return []
      }
    },
    unit: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      chart: null,
      valueList: this.yData.length > 0 ? this.yData : [116, 129, 135, 86, 73, 85, 73, 68, 92, 130, 245, 139, 115, 111, 309, 206, 137, 128, 85, 94,
        71, 106, 84, 93, 85, 73, 83, 125, 107, 82, 44, 72, 106, 107, 66, 91, 92, 113, 107, 131, 111,
        64, 69, 88, 77, 83, 111, 57, 55, 60],
      dateList: this.xData.length > 0 ? this.xData : ['2021-07-06', '2021-07-07', '2021-07-08', '2021-07-09', '2021-07-10', '2021-07-11', '2021-07-12',
        '2021-07-13', '2021-07-14', '2021-07-15', '2021-07-16', '2021-07-17', '2021-07-18', '2021-07-19', '2021-07-20',,
        '2021-07-21', '2021-07-22', '2021-07-23', '2021-07-24', '2021-07-25', '2021-07-26', '2021-07-27', '2021-07-28',
        '2021-07-29', '2021-07-30', '2021-07-31', '2021-08-01', '2021-08-02', '2021-08-03', '2021-08-04', '2021-08-05',
        '2021-08-06'
      ]
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.initChartEvent()
  },
  methods: {
    initChartEvent() {
      if (!this.chart) {
        const chartDom = document.getElementById(this.id)
        if (!chartDom) return
        this.chart = echarts.init(chartDom)
        this.initChart()
      }
      window.addEventListener('beforeunload', this.clearChart)
    },

    clearChart() {
      // 手动触发 destroy 相关的生命周期
      this.$destroy()
    },
    initChart() {
      const { more, grid, unit } = this
      let series = []
      if (!more) {
        series = [{
          type: 'line',
          showSymbol: false,
          data: this.valueList
        }]
      } else {
        for (const seriesKey in this.yData) {
          series = [
            ...series,
            {
              type: 'line',
              showSymbol: false,
              data: this.yData[seriesKey]
            }
          ]
        }
      }
      const text = this.text
      this.chart.setOption({
        // Make gradient line here
        visualMap: [{
          show: false,
          type: 'continuous',
          seriesIndex: 0,
          min: 0,
          max: 400
        }],

        title: [{
          left: 'center',
          text: this.text || '近 30 天活跃用户数',
          textStyle: {
            color: '#bb3b3b'
          }
        }],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: '#57617B'
            }
          },
          formatter: function(params) {
            // hasMoreY
            const { axisValue, value } = params[0]
            // console.log(params);
            let tips = ''
            if (more) {
              text.forEach((val) => {
                tips += `<div class="tooltips-time">${axisValue}</div>
                    <div class="tooltips-label">${val || '近 30 天活跃用户数'}：${value}${unit}</div>
                `
              })
            } else {
              tips += `<div class="tooltips-time">${axisValue}</div>
                    <div class="tooltips-label">${text || '近 30 天活跃用户数'}：${value}${unit}</div>
                `
            }
            return tips
          }
        },
        xAxis: [{
          data: this.dateList,
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff'
            }
          }
        }],
        yAxis: [{
          splitLine: { show: false },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff'
            }
          }
        }],
        grid: [grid],
        series
      })
    }
  }
}
</script>

<style scoped lang='scss'>
  .link-chart-panel {
    width: 100%;
    max-width: 500px;
    min-width: 380px;
    /*background-color: transparent;*/
    height: 240px;
    /*width: calc( 100% - 20px );*/
    /*position: fixed;*/
    border-radius: 4px;
    /*top: 20px;*/
    z-index: 9;
    color: #fff;
    /*width: 100%;*/
    background-color: rgba(0,0,0,.2);
    padding:10px 15px;
    margin-bottom: 10px;
  }
  ::v-deep .tooltips-time {
    font-size: 13px;
    color: #000;
    font-weight: 900;
  }
  ::v-deep .tooltips-label {
    padding-left: 20px;
    position: relative;
    &::before{
      content: '';
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: #0094ee;
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
    }
  }
</style>
